<script setup lang="ts">
import macros from "../macros.ts"
import axios from "axios";
import {router} from "../main.js"
  class Info{
    email:string;
    phone:string;
    name:string;
    address:string;
    beginDate:Date;
    endDate:Date;
    type:number;
    notes:string;
  }
  var info=new Info();
  function submit(){
    axios.post(macros.server+"/api/newproject",info)
        .then(function (response){
          router.push("/complete");
          console.log(response);
    }).catch(function (error){
      console.log(error);
    });
  }
</script>

<template>
  <div>
    <p><h2 class="text-light">联系我们</h2></p>
    <p><h3 class="text-light">聘请我们进行拍摄</h3></p>
    <p>请填写下表，或直接将电子邮件发送至photography@xxxx.com。向下滑动可看到提交按钮。</p>
    <p>
      <form style="width: 30rem;margin: auto" method="post">
        <div class="mb-3 mt-3" style="width: 30rem;margin: auto">
          <lable for="email" class="form-label text-light">您的电子邮件地址（和手机号二选一填写，也可2个都写）</lable>
          <input v-model="info.email" type="email" class="form-control" id="email" placeholder="Email" name="email">
        </div>
        <div class="mb-3 mt-3" style="width: 30rem;margin: auto">
          <lable for="phonenumber" class="form-label text-light">您的手机号（和电子邮件地址二选一填写，也可2个都写）</lable>
          <input v-model="info.phone" type="tel" class="form-control" id="phonenumber" placeholder="手机号" name="phonenumber">
        </div>
        <div class="mb-3 mt-3" style="width: 30rem;margin: auto">
          <lable for="name" class="form-label text-light">姓名</lable>
          <input v-model="info.name" type="text" class="form-control" id="name" placeholder="姓名" name="name">
        </div>
        <div class="mb-3 mt-3" style="width: 30rem;margin: auto">
          <lable for="address" class="form-label text-light">地址</lable>
          <input v-model="info.address" type="text" class="form-control" id="address" placeholder="地址" name="address">
        </div>
        <div class="mb-3 mt-3" style="width: 30rem;margin: auto">
          <lable for="date1" class="form-label text-light">拍摄起始日期</lable>
          <input v-model="info.beginDate" type="date" class="form-control" id="date1" name="date1">
        </div>
        <div class="mb-3 mt-3" style="width: 30rem;margin: auto">
          <lable for="date2" class="form-label text-light">拍摄截止日期</lable>
          <input v-model="info.endDate" type="date" class="form-control" id="date2" name="date2">
        </div>
        <div class="text-light" style="width: 30rem;margin: auto">拍摄类型：</div>
        <div class="form-check"  style="width: 20rem;margin: auto">
          <div>
            <input v-model="info.type" type="radio" class="form-check-input" id="photography" name="type" value="0" checked>
            <label class="form-check-label text-light" for="photography">拍照</label>
          </div>
          <div>
            <input v-model="info.type" type="radio" class="form-check-input" id="shortvideo" name="type" value="1">
            <label class="form-check-label text-light" for="shortvideo">拍摄短片</label>
          </div>
        </div>
        <div class="text-light" style="width: 30rem;margin: auto">
          <label for="notes">备注：</label>
          <textarea v-model="info.notes" class="form-control" rows="2" id="notes" name="notes"></textarea>
        </div>
        <div style="text-align: center">
          <button @click="submit" type="button" class="btn btn-outline-light text-light" style="margin: 1rem">提交</button>
        </div>
      </form>
    </p>
   </div>
</template>

<style scoped>

</style>